<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm">
          <el-form-item label="推荐类别" prop="recomType">
            <el-select v-model="form.recomType">
              <el-option label="网络正能量内容创作者（含账号）" value="内容创作者"></el-option>
              <el-option label="网络正能量传播者（含账号和平台）" value="传播者"></el-option>
              <el-option label="网络空间的正能量公众人物" value="公众人物"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作品链接" prop="workUrl">
            <el-input v-model="form.workUrl"></el-input>
          </el-form-item>
          <el-form-item label="相关链接" prop="relatedUrl">
            <el-input v-model="form.relatedUrl"></el-input>
          </el-form-item>
          <el-form-item label="作品介绍" prop="workIntro">
            <el-input
              type="textarea" v-model="form.workIntro"
              maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="社会效果" prop="effect">
            <el-input
              type="textarea" v-model="form.effect"
              maxlength="50" show-word-limit></el-input>
          </el-form-item>
          <br>
          <el-form-item>
            <el-upload
              class="upload-picture"
              :class="{hide:hideUpload}"
              action="/picture/addPicture"
              :on-preview="handlePreview"
              :on-change="handleChange"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :file-list="fileList"
              list-type="picture-card">
              <el-button size="small" type="primary">点击上传作品</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png/tif/tga文件，且不超过30M</div>
            </el-upload>
          </el-form-item>
          <el-form-item prop="checked">
            <el-checkbox v-model="form.checked">我承诺本图像作品内容纯属原创，不存在抄袭</el-checkbox>
          </el-form-item>
          <br>
          <br>
          <br>
          <el-form-item>
            <el-button type="waring" @click="$router.go(-1)">上一步</el-button>
            <el-button type="waring" @click="submitForm('ruleForm')">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Picture',
  data () {
    return {
      form: {
        recomType: '',
        workUrl: '',
        relatedUrl: '',
        workIntro: '',
        effect: '',
        checked: false
      },
      hideUpload: false,
      limitCount: 1,
      fileList: [],
      isWork: 0,
      deadline: 20230305,
      beforeDeadline: true,
      rules: {
        recomType: [
          {required: true, message: '请选择推荐类别', trigger: 'change'}
        ],
        workUrl: [
          { type: 'url', required: true, message: '请输入有效的作品链接', trigger: 'blur' }
        ],
        relatedUrl: [
          { type: 'url', required: true, message: '请输入有效的作品相关链接', trigger: 'blur' }
        ],
        workIntro: [
          {required: true, message: '请输入作品介绍（不超过50字）', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在1到50个字符', trigger: 'blur'}
        ],
        effect: [
          {required: true, message: '请输入社会效果（不超过50字）', trigger: 'blur'},
          {min: 1, max: 50, message: '长度在1到50个字符', trigger: 'blur'}
        ],
        checked: [
          {required: true, message: '请作出承诺', trigger: 'change'}
        ]
      }
    }
  },

  methods: {
    beforeUpload (file) {
      console.log(file)
      let fileName = file.name
      var suffix = ''
      var result = ''
      try {
        let flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      if (!suffix) {
      }
      var imglist = ['png', 'jpg', 'tga', 'tif', 'bmp',
        'PNG', 'JPG', 'TGA', 'TIF', 'BMP']
      result = imglist.some(function (item) {
        return item === suffix
      })
      if (!result) {
        this.$message.error('只能上传png/jpg/tga/tif/bmp格式的文件')
        return false
      }
      const isLt30M = file.size / 1024 / 1024 < 30
      if (!isLt30M) {
        this.$message.error('文件大小不能超过30M！')
        return false
      }
    },
    handleChange (file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      this.isWork = fileList.length > 0
    },
    handleRemove (file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount
      this.isWork = fileList.length > 0
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    submitForm () {
      if (this.beforeDeadline) {
        this.putData()
      }
    },
    // 传输到后端
    putData () {
      this.$refs.form.validate((valid) => {
        if (!this.isWork) {
          this.$message.error('请上传图片作品！')
          return false
        } else if (valid && this.form.checked) {
          alert('submit!')
          // eslint-disable-next-line no-unused-expressions
          this.$axios.put('/picture/1', this.form).then(res => {
            // code=?200
            if (res.data.code === 0) {
              console.info('yes')
            } else {
              console.info('no')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 时间函数,判断是否过期
    deadLine () {
      let year = new Date().getFullYear().toString()
      let mm = new Date().getMonth() + 1
      let month = ('0' + mm.toString()).slice(-2)
      let dd = new Date().getDate()
      let date = ('0' + dd.toString()).slice(-2)
      let ntime = year + month + date
      console.log(ntime)
      // deadline: 2023/3/5
      if (ntime > this.deadline) {
        this.beforeDeadline = false
      }
    },
    // 从数据库里调暂存的数据
    getData () {
      this.$axios.get('/picture/1').then(res => {
        this.form = res.data.data
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style>
  .hide .el-upload--picture-card {
    display: none
  }
</style>
